<template>
    <div  class="homePage">
        <div class="title-box">
          <div class="trans-box tab-box" @click="onTap('trans')" :class="{ active: tapTyp == 'trans' }">
            <h4>交易中心</h4>
            <span class="active-bg" v-if="tapTyp == 'trans'"></span>
        </div>
        <div @click="onTap('shop')" class="tab-box" :class="{ active: tapTyp == 'shop' }">
            <h4>星链商城</h4>
            <span class="active-bg" v-if="tapTyp == 'shop'"></span>
        </div>
        <img src="/static/message.png" alt="" class="img" @click="linkMsgDetail">
        </div>
    </div>
  </template>
  
  
  <script>
  export default {
    
    props: ["res"],
    data() {
      return {
        tapTyp: "trans",
      };
    },
    mounted() {},
    methods: {
      onTap(val) {
        this.tapTyp = val;
      },
      linkMsgDetail(){
        uni.navigateTo({
          url:`/pages/tabbar/home/title`
        })
      },
    }
  };
  </script>
  <style lang="scss" scoped>.homePage{
    width: 100vw;
    height: 176rpx;
    background: linear-gradient(to top , rgba(238,252,204,0) 0%, #00FFAD 100%);
    
    .title-box{
      width: 100%;
      height: 88rpx;
      position: relative;
      left: 0;
      top: 88rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .trans-box{
      margin-right: 40rpx;
    }
    .img{
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      right: 36rpx;
      top: 24rpx;
    }
    .tab-box{
      position: relative;
      font-size: 28rpx;
      color: #212121;
      font-weight: 500;
    }
    .active{
      font-size: 36rpx;
    }
    .active-bg{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 144rpx;
      height: 14rpx;
      background: #00FFAD;
      z-index: -1;
    }
    
  }
  </style>